<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 阻止表单提交的刷新页面事件 -->
            <form @submit.prevent="printForm">
                <!-- trim修饰符，去除前后空格 -->
                <div>
                    account：<input
                        type="text"
                        v-model.trim="userInfo.account"
                    />
                </div>
                <div>
                    password：<input
                        type="password"
                        v-model="userInfo.password"
                    />
                </div>
                <!-- 一共两个number，第一个number是限制输入字符只能是数字，第二个number指定vue实例的data是数字格式，而非字符串格式 -->
                <div>
                    age：<input type="number" v-model.number="userInfo.age" />
                </div>
                <div>
                    sex:
                    <template
                        ><input
                            type="radio"
                            value="male"
                            v-model="userInfo.sex"
                        />男</template
                    >
                    <template
                        ><input
                            type="radio"
                            value="female"
                            v-model="userInfo.sex"
                        />女</template
                    >
                </div>
                <div>
                    hobby：
                    <!-- 
                        checkbox的vue数据格式如果是字符串形式的,那么返回的是true/false,
                        如果想保存多个数据,需要使用数组格式的变量来接收
                     -->
                    <template
                        ><input
                            type="checkbox"
                            value="eat"
                            v-model="userInfo.hobby"
                        />吃</template
                    >
                    <template
                        ><input
                            type="checkbox"
                            value="drink"
                            v-model="userInfo.hobby"
                        />喝</template
                    >
                    <template
                        ><input
                            type="checkbox"
                            value="play"
                            v-model="userInfo.hobby"
                        />玩</template
                    >
                </div>
                <!-- lazy修饰符是不立刻更新vue实例数据,在当前元素失去焦点的时候更新data中的数据 -->
                <div><textarea v-model.lazy="userInfo.other"></textarea></div>
                <!-- checkbox如果是字符串类型的变量,那么返回的就是true/false -->
                <div>
                    <input
                        type="checkbox"
                        v-model="userInfo.agree"
                    />我已阅读并同意<a href="http://www.baidu.com">协议</a>
                </div>
                <!-- 点击form表单中的button后会触发form绑定的action或者submit绑定的方法 -->
                <button>提交</button>
            </form>
        </div>

        <script>
            const vm = new Vue({
                data() {
                    return {
                        userInfo: {
                            account: "",
                            password: "",
                            age: "",
                            sex: "male",
                            hobby: [],
                            other: "",
                            agree: "",
                        },
                    };
                },
                methods: {
                    printForm() {
                        console.log(JSON.stringify(this.userInfo));
                    },
                },
            });

            vm.$mount("#root");
        </script>
    </body>
</html>
